import React, { useState } from 'react';
import { Card, Typography, Alert } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Table, Divider, Tag, Tree, Row, Col } from 'antd';
import { connect } from 'dva';
import RenderButtom from '@/components/RenderButton'

const { TreeNode } = Tree;

/**
 * 
 * @param {Boolean} defaultExpandAll 是否展开所有节点 
*/
const MenuTree = props => {
  const { menus = props.global.menus } = props
  const treeData = m => {
    const data = []
    m.map(e => 
      e.children ?
      data.push({ 
        title: e.name,
        key: e.id,
        path: e.path,
        chidren: treeData(e.children)
      }) :
      data.push({ 
        title: e.name,
        key: e.id,
        path: e.path
      })
    )
    return data
  }
  const renderTreeNodes = data =>
    data.map(item => {
      if (item.chidren) {
        return (
          <TreeNode title={item.title} key={item.key}>
            {renderTreeNodes(item.chidren)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.key} {...item} />;
  });
  return (
    <Tree
      checkable
      defaultExpandAll
      {...props}
    >
      {menus && renderTreeNodes(treeData(menus))}
    </Tree>
  )
}

export default connect(({ global }) => ({
    global,
}))(MenuTree);
